<template>
  <el-table
    :data="tableData"
    size="small"
    :height="tableHeight"
    style="width: 100%"
  >
    <el-table-column width="170" align="center" fixed>
      <template #header>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
          "
        >
          <span style="padding-right: 12px">时刻</span>
        </div>
      </template>

      <template #default="scope">
        <span>{{ momentStringify(scope.row.moment) }}</span>
        <!-- <span>
          {{ dayjs(scope.row.moment).format("MM/DD HH:mm") }}
        </span>
        <span> ~ </span>
        <span>
          {{
            dayjs(scope.row.moment)
              .add(gap * 15, "minute")
              .format("HH:mm")
          }}
        </span> -->
      </template>
    </el-table-column>
    <el-table-column
      label="扇区数量"
      align="center"
      v-if="isSelected('扇区数量')"
    >
      <el-table-column label="建议" align="center" width="60">
        <template #default="scope">
          <span>{{ scope.row.flowData.sectorRequire }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="实际" width="60">
        <template #default="scope">
          <span>{{ scope.row.sectorCount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="差值" width="60">
        <template #default="scope">
          <span
            :style="{
              color:
                scope.row.sectorCount - scope.row.flowData.sectorRequire > 0
                  ? 'var(--el-color-danger)'
                  : scope.row.sectorCount - scope.row.flowData.sectorRequire < 0
                  ? 'var(--el-color-success)'
                  : 'auto',
            }"
          >
            {{ scope.row.sectorCount - scope.row.flowData.sectorRequire }}
          </span>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column
      label="终端区架次"
      align="center"
      v-if="isSelected('终端区架次')"
    >
      <el-table-column label="架次" align="center" width="60">
        <template #default="scope">
          <span>{{ scope.row.flowData.total }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修正值" align="center" width="80">
        <template #default="scope">
          <span
            :style="{
              color:
                scope.row.flowData.inboundValue - scope.row.flowData.total > 0
                  ? 'var(--el-color-warning)'
                  : 'auto',
            }"
          >
            {{ scope.row.flowData.inboundValue.toFixed(2) }}
          </span>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column
      label="双流架次"
      align="center"
      v-if="isSelected('双流架次')"
    >
      <el-table-column label="合计" align="center" width="60">
        <template #default="scope">
          <span>{{ scope.row.flowData.airport.ZUUU.total }}</span>
        </template>
      </el-table-column>
      <el-table-column label="离场" align="center" width="60">
        <template #default="scope">
          <span>{{ scope.row.flowData.airport.ZUUU.type.DEP.total }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进场" align="center" width="60">
        <template #default="scope">
          <span>{{ scope.row.flowData.airport.ZUUU.type.ARR.total }}</span>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column
      label="天府架次"
      align="center"
      v-if="isSelected('天府架次')"
    >
      <el-table-column label="合计" align="center" width="60">
        <template #default="scope">
          <span>{{ scope.row.flowData.airport.ZUTF.total }}</span>
        </template>
      </el-table-column>
      <el-table-column label="离场" align="center" width="60">
        <template #default="scope">
          <span>{{ scope.row.flowData.airport.ZUTF.type.DEP.total }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进场" align="center" width="60">
        <template #default="scope">
          <span>{{ scope.row.flowData.airport.ZUTF.type.ARR.total }}</span>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column
      label="绵阳架次"
      align="center"
      v-if="isSelected('绵阳架次')"
    >
      <el-table-column label="合计" align="center" width="60">
        <template #default="scope">
          <span>{{ scope.row.flowData.airport.ZUMY.total }}</span>
        </template>
      </el-table-column>
      <el-table-column label="离场" align="center" width="60">
        <template #default="scope">
          <span>{{ scope.row.flowData.airport.ZUMY.type.DEP.total }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进场" align="center" width="60">
        <template #default="scope">
          <span>{{ scope.row.flowData.airport.ZUMY.type.ARR.total }}</span>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column
      label="双流起降分布"
      align="center"
      v-if="isSelected('双流起降分布')"
    >
      <el-table-column label="BOKIR" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUUU.type.DEP.point.BOKIR
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="GURET" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUUU.type.DEP.point.GURET
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="UBRAB" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUUU.type.DEP.point.UBRAB
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="IDBOR" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUUU.type.DEP.point.IDBOR
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="LUVEN" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUUU.type.DEP.point.LUVEN
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="MUMGO" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUUU.type.DEP.point.MUMGO
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="MEXAD" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUUU.type.ARR.point.MEXAD
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="AKDIK" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUUU.type.ARR.point.AKDIK
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="EKOKA" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUUU.type.ARR.point.EKOKA
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="IGNAK" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUUU.type.ARR.point.IGNAK
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="LADUP" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUUU.type.ARR.point.LADUP
          }}</span>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column
      label="天府起降分布"
      align="center"
      v-if="isSelected('天府起降分布')"
    >
      <el-table-column label="BOKIR" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUTF.type.DEP.point.BOKIR
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="SAGPI" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUTF.type.DEP.point.SAGPI
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="UBRAB" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUTF.type.DEP.point.UBRAB
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="ATVAX" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUTF.type.DEP.point.ATVAX
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="LUVEN" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUTF.type.DEP.point.LUVEN
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="MUMGO" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUTF.type.DEP.point.MUMGO
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="MEXAD" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUTF.type.ARR.point.MEXAD
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="BUPMI" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUTF.type.ARR.point.BUPMI
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="AKOPI" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUTF.type.ARR.point.AKOPI
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="ELDUD" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUTF.type.ARR.point.ELDUD
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="IGNAK" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUTF.type.ARR.point.IGNAK
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="LADUP" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUTF.type.ARR.point.LADUP
          }}</span>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column
      label="绵阳起降分布"
      align="center"
      v-if="isSelected('绵阳起降分布')"
    >
      <el-table-column label="BOKIR" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUMY.type.DEP.point.BOKIR
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="SAGPI" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUMY.type.DEP.point.SAGPI
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="UBRAB" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUMY.type.DEP.point.UBRAB
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="JTG" align="center" width="70">
        <template #default="scope">
          <span>{{ scope.row.flowData.airport.ZUMY.type.DEP.point.JTG }}</span>
        </template>
      </el-table-column>

      <el-table-column label="MEXAD" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUMY.type.ARR.point.MEXAD
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="AKDIK" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUMY.type.ARR.point.AKDIK
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="BUPMI" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUMY.type.ARR.point.BUPMI
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="IGNAK" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUMY.type.ARR.point.IGNAK
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="LADUP" align="center" width="70">
        <template #default="scope">
          <span>{{
            scope.row.flowData.airport.ZUMY.type.ARR.point.LADUP
          }}</span>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column
      label="扇区架次"
      align="center"
      v-if="isSelected('扇区架次')"
    >
      <el-table-column
        v-for="seat in seatList"
        :label="seat"
        align="center"
        width="70"
      >
        <template #default="scope">
          <span>{{ matchSeat(scope.row.seatData, seat).value }}</span>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column
      label="扇区负荷"
      align="center"
      v-if="isSelected('扇区负荷')"
    >
      <el-table-column
        v-for="seat in seatList"
        :label="seat"
        align="center"
        width="70"
      >
        <template #default="scope">
          <span>{{ matchSeat(scope.row.seatData, seat).load }}</span>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column
      label="扇区模块"
      align="center"
      v-if="isSelected('扇区模块')"
    >
      <el-table-column
        v-for="seat in seatList"
        :label="seat"
        align="center"
        width="300"
      >
        <template #default="scope">
          <span v-if="scope.row.enviromentData.seats[seat]">
            {{ scope.row.enviromentData.seats[seat].join(", ") }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column
      label="扇区人员"
      align="center"
      v-if="isSelected('扇区人员')"
    >
      <el-table-column
        v-for="seat in seatList"
        :label="seat"
        align="center"
        width="300"
      >
        <template #default="scope">
          <span v-if="scope.row.enviromentData.users[seat]">
            {{ scope.row.enviromentData.users[seat].join(", ") }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column
      label="活动情况"
      align="center"
      v-if="isSelected('活动情况')"
      width="300"
    >
      <template #default="scope">
        <span v-if="scope.row.enviromentData.activity.length > 0">
          {{ scope.row.enviromentData.activity.join(", ") }}
        </span>
        <span v-else>-</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { h, ref, computed, onMounted, onUnmounted, nextTick } from "vue";
import dayjs from "dayjs";
import useFlowStore from "@/store/flow.js";
import useCommonStore from "@/store/common.js";

const flowStore = useFlowStore();
const commonStore = useCommonStore();

const isSelected = (column) => {
  return flowStore.dataQuerierContent.tableColumns.includes(column);
};

const seatList = ref([
  "TM01",
  "TM02",
  "TM03",
  "TM04",
  "TM05",
  "TM06",
  "TM07",
  "TM08",
  "TM09",
  "TM10",
  "TM11",
  "TM12",
  "TM13",
  "TM14",
]);

const superSeatList = ref(["OMA01", "SUP01", "SUP02", "PLANNER"]);

const matchSeat = (data, seat) => {
  let match = data.filter((cell) => cell.seat == seat);
  if (match.length == 1) {
    return match[0];
  } else {
    return {
      seat: "TM01",
      value: "-",
      load: "-",
      sector: [],
    };
  }
};

const tableData = computed(() => flowStore.dataQuerierContent.arrangedData);

const gap = computed(() => flowStore.dataQuerierContent.gap);

const tableHeight = computed(() => commonStore.getClientHeight - 180 + "px");

const momentStringify = (momentStr) => {
  console.log("momentStringify", momentStr);
  return (
    dayjs(momentStr).format("MM/DD HH:mm") +
    " ~ " +
    dayjs(momentStr)
      .add(gap.value * 15, "minute")
      .format("HH:mm")
  );
};
</script>
